<template>
  <div></div>
</template>

<script setup>
import { inject, onMounted,onBeforeUnmount } from 'vue'
import {getWuhanBridges} from '@/api/index.js'
import { LineLayer,Popup } from '@antv/l7'
const { map, scene } = inject('mapScene')
let bridgeLayer
let popup= new Popup({})
scene.addPopup(popup)
onMounted(async () => {
  map.flyTo({
    center: [114.26459274, 30.50024641],
    zoom: 13.2,
    pitch: 67,
    bearing: -21,
  })
const { data: bridgeData } = await getWuhanBridges()
bridgeLayer = new LineLayer({
    name: '桥梁',
  })
bridgeLayer
  .source(bridgeData)
  .shape('arc3d')
  .size(10)
  .color('name',['yellow','blue','red','green'])
  .style({
    thetaOffset: 1,
  })
  scene.addLayer(bridgeLayer)
bridgeLayer.on('click', (e) => {
  const { feature:{
    properties:{
      name,
      info
    }
  } ,lngLat} = e
  popup.setLnglat(lngLat)
  popup.setHTML(`
  <div style="font-size: 12px;">
    <p>${info}</p>
    </div>
    `)
  popup.setTitle(name)
})
})
onBeforeUnmount(()=>{
scene.removeLayer(bridgeLayer)
scene.removePopup(popup)
})
</script>

<style scoped lang="scss">
</style>
